<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/tdesign-react/dist/tdesign.min.css" />
    <title>TDesign site components</title>
  </head>
  <body>
    <td-stats></td-stats>
    <td-doc-layout>
      <td-header slot="header">
        <td-doc-search slot="search"></td-doc-search>
      </td-header>
      <td-doc-aside title="Vue for Web">
        <td-select value="1" slot="extra"></td-select>
      </td-doc-aside>
      <td-doc-content platform="mobile">
        <td-doc-header component-name="button" slot="doc-header" platform="mobile" spline="design-layout">
          <td-doc-badge slot="badge" message="100%" color="brightgreen"></td-doc-badge>
        </td-doc-header>

        <td-doc-tabs></td-doc-tabs>

        <td-code-block panel="js">
          <pre slot="js" lang="js">
          // 关于语言切换功能，需在引入时全局注册事件，cb 可传可不传，不传则用默认事件
          import { registerLocaleChange } from '@tdesign/site-components';
          registerLocaleChange(cb);
        </pre
          >

          <pre slot="html" lang="html">
          <span slot="js">tdesign</span>
        </pre>
        </td-code-block>

        <td-doc-usage code="<div>这里是组件渲染区域</div>">
          <div slot="baseTable">这里是组件渲染区域1</div>
          <div slot="primaryTable">这里是组件渲染区域2</div>
        </td-doc-usage>

        <!-- <td-doc-empty></td-doc-empty> -->

        <div name="DOC" id="test">
          <nav class="tdesign-toc_container">
            <ol class="tdesign-toc_list">
              <li class="tdesign-toc_list_item"><a href="#表格分类" class="tdesign-toc_list_item_a">表格分类</a></li>
              <li class="tdesign-toc_list_item"><a href="#基础表格" class="tdesign-toc_list_item_a">基础表格</a></li>
              <li class="tdesign-toc_list_item">
                <a href="#固定表头-固定行的表格" class="tdesign-toc_list_item_a">固定表头/固定行的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#固定列的表格" class="tdesign-toc_list_item_a">固定列的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#固定表头和列的表格" class="tdesign-toc_list_item_a">固定表头和列的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#自定义单元格的表格" class="tdesign-toc_list_item_a">自定义单元格的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#自定义表头的表格" class="tdesign-toc_list_item_a">自定义表头的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#自定义表尾的表格" class="tdesign-toc_list_item_a">自定义表尾的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#可展开和收起的表格" class="tdesign-toc_list_item_a">可展开和收起的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#可进行列配置的表格" class="tdesign-toc_list_item_a">可进行列配置的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#可排序的表格" class="tdesign-toc_list_item_a">可排序的表格</a>
                <ol class="tdesign-toc_list"></ol>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#可选中行的表格" class="tdesign-toc_list_item_a">可选中行的表格</a>
                <ol class="tdesign-toc_list"></ol>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#可分页的表格" class="tdesign-toc_list_item_a">可分页的表格</a>
                <ol class="tdesign-toc_list"></ol>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#可筛选的表格" class="tdesign-toc_list_item_a">可筛选的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#带合并单元格的表格" class="tdesign-toc_list_item_a">带合并单元格的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#多级表头的表格" class="tdesign-toc_list_item_a">多级表头的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#加载状态的表格" class="tdesign-toc_list_item_a">加载状态的表格</a>
                <ol class="tdesign-toc_list"></ol>
              </li>
              <li class="tdesign-toc_list_item"><a href="#空表格" class="tdesign-toc_list_item_a">空表格</a></li>
              <li class="tdesign-toc_list_item">
                <a href="#可拖拽排序的表格" class="tdesign-toc_list_item_a">可拖拽排序的表格</a>
                <ol class="tdesign-toc_list"></ol>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#树形结构的表格" class="tdesign-toc_list_item_a">树形结构的表格</a>
                <ol class="tdesign-toc_list"></ol>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#懒加载的表格" class="tdesign-toc_list_item_a">懒加载的表格</a>
              </li>
              <li class="tdesign-toc_list_item">
                <a href="#虚拟滚动的表格" class="tdesign-toc_list_item_a">虚拟滚动的表格</a>
              </li>
            </ol>
          </nav>

          <td-doc-demo>
            <div style="padding: 100px">text</div>
          </td-doc-demo>
          <td-doc-demo show-code mode="open"></td-doc-demo>
        </div>
        <!-- <td-doc-phone qrcode-url="https://tdesign.tencent.com">
        <iframe src="https://tdesign.tencent.com/design" style="overflow-x: hidden;" width="100%" height="100%" frameborder="0"></iframe>
      </td-doc-phone> -->

        <td-contributors platform="mobile" framework="vue" component-name="dialog"></td-contributors>

        <td-avatar username="chazzhou"></td-avatar>

        <td-doc-history time="1639583136582"></td-doc-history>

        <td-doc-footer platform="mobile" slot="doc-footer"></td-doc-footer>
      </td-doc-content>
    </td-doc-layout>

    <script type="module">
      // import './lib/site.es.js';
      // import './lib/styles/style.css';
      import './src/main.js';
      import './config/mock.js';

      document.querySelector('td-doc-aside').routerList = window.routerList;
      document.querySelector('td-doc-aside').onchange = (e) => {
        history.pushState({}, '', e.detail);
        document.querySelector('td-stats').track();
      };
      document.querySelector('td-doc-header').docInfo = window.docInfo;
      document.querySelector('td-doc-demo').oncopy = (e) => console.log('copy:', e);
      document.querySelector('td-doc-demo').languages = 'JavaScript,TypeScript,CompositionAPI';
      document.querySelector('td-doc-demo').dataset['JavaScript'] = window.code;
      document.querySelector('td-doc-demo').dataset['TypeScript'] = window.tsCode;
      document.querySelector('td-doc-demo').dataset['CompositionAPI'] = window.compositionCode;

      document.querySelectorAll('td-doc-demo').forEach((e) => (e.code = window.code));
      document.querySelector('td-contributors').contributors = window.contributors;
      document.querySelector('td-doc-search').docsearchInfo = { indexName: 'tdesign_doc_react' };
      document.querySelector('td-select').options = [1, 2, 3, 4, 5].map((i) => ({ label: i, value: i }));
      document.querySelector('td-select').onchange = ({ detail }) => console.log('detail', detail);
      // document.querySelector('td-switch').onchange = ({ detail }) => console.log('detail', detail)
      document.querySelector('td-doc-usage').configList = window.usageConfig;
      document.querySelector('td-doc-usage').panelList = window.usagePanelList;
      document.querySelector('td-doc-usage').onConfigChange = ({ detail }) => console.log('detail', detail);
      // document.querySelector('td-doc-tabs').tabs = [{ tab: 'demo', name: '示例1' }];

      // const tdDocPhone = document.querySelector('td-doc-phone');
      // tdDocPhone.qrcodeUrl = 'http://localhost:3000/';
      // tdDocPhone.QRCode.toCanvas(tdDocPhone.qrCanvas, 'https://github.com/soldair/node-qrcode', { width: 84, height: 84 });
    </script>
  </body>
</html>
